<template>
  <!-- 服务说明 -->
  <uni-popup ref="popup" type="bottom" background-color="#fff" :showClose="true">
    <!-- 头部 -->
    <view class="header"
      >服务说明
      <!-- 关闭按钮 -->
      <view class="close" @click="closePopup">×</view></view
    >
    <!-- 服务保障条款 -->
    <view class="clause">
      <!-- 每个保障条款 -->
      <view class="clause_item" v-for="item in serviceList" :key="item.id">
        <!-- 标题 -->
        <view class="item_title">{{ item.title }}</view>
        <!-- 内容 -->
        <view class="item_contant">{{ item.content }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const popup = ref()
// 打开弹出层的回调
const open = () => {
  popup.value.open()
}
// 服务保障列表
const serviceList = ref([
  {
    id: 1,
    title: '退货运费险',
    content: '卖家投保退货运费险, 负担一定金额退货运费 (保单生效以下单显示为准)',
  },
  {
    id: 2,
    title: '极速退款',
    content: '满足相应条件时, 诚信用户在退货寄出后, 享受极速退款到账',
  },
  {
    id: 3,
    title: '7天无理由退货',
    content:
      '满足7天无理由退换货申请的前提下, 包邮商品需要买家承担退货邮费, 非包邮商品需要买家承担发货和退货邮费。',
  },
])
// 点击关闭对话框
const closePopup = () => {
    popup.value.close()
}
// 将函数暴露出去
defineExpose({
  open,
})
</script>

<style lang="scss">
.header {
  position: relative;
  margin: 0 10rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  border-bottom: 1px solid #ddd;
  .close {
    position: absolute;
    top: 0rpx;
    right: 10rpx;
    font-size: 48rpx;
    color: #666;
  }
}
.clause {
  padding: 40rpx 30rpx 20rpx 30rpx;
  font-size: 28rpx;
  .clause_item {
    position: relative;
    margin-bottom: 30rpx;
    .item_title {
      margin: 10rpx 0;
    }
    .item_contant {
      color: #9a9a9a;
    }
  }
  .clause_item::before {
    position: absolute;
    top: 14rpx;
    left: -18rpx;
    content: '';
    width: 10rpx;
    height: 10rpx;
    background-color: #ddd;
    border-radius: 50%;
  }
}
</style>
